<template>
	<view class="u-page">
		<view class="check-type" v-if="!formdata.customer_type">
			<view class="title">请选择注册类型</view>
			<view class="company" @click="formdata.customer_type='company'">注册成为企业用户</view>
			<view class="family" @click="formdata.customer_type='family'">注册成为普通住户</view>
		</view>
		<view class="formbox" v-if="formdata.customer_type=='company'">
			<view class="item">
				<view class="title">贸易商：</view>
				<view class="value">
					<u-input v-model="channel.title" disabled/>
				</view>
			</view>
			<view class="item" v-if="seller">
				<view class="title">推荐人：</view>
				<view class="value">
					<u-input v-model="seller.realname" disabled/>
				</view>
			</view>
			<view :class="rules.name.error?'item error':'item'">
				<view class="title">企业名称：</view>
				<view class="value">
					<u-input placeholder="请输入企业名称" v-model="formdata.name" @blur="$validate('name')" />
					<view class="tag-danger" v-if="rules.name.error">企业名称不能为空</view>
				</view>
			</view>
			<view :class="rules.cover_url.error?'item error':'item'">
				<view class="title">企业门头：</view>
				<view class="value">
					<u-upload
							:fileList="formdata.cover_url"
							:sizeType="sizeType"
							@afterRead="afterRead1"
							@delete="deletePic1"
							width="100"
							height="100"
						>
					</u-upload>
					<view class="tag-danger" v-if="rules.cover_url.error">请上传企业门头</view>
				</view>
			</view>
			<view :class="rules.license_photo.error?'item error':'item'">
				<view class="title">营业执照：</view>
				<view class="value">
					<u-upload 
						:fileList="formdata.license_photo" 
						:sizeType="sizeType" 
						@afterRead="afterRead"
						@delete="deletePic"
						width="100"
						height="100"
					>
					</u-upload>
					<view class="tag-danger" v-if="rules.license_photo.error">请上传营业执照</view>
				</view>
			</view>
			<view style="font-size: 24rpx;padding: 20rpx;background: red;color: #fff;overflow: hidden;margin-bottom: 20rpx;">支持ocr识别营业执照编号与地址，访问https://developers.weixin.qq.com/community/servicemarket/detail/000ce4cec24ca026d37900ed551415购买</view>
			<view :class="rules.license.error?'item error':'item'">
				<view class="title">执照编号：</view>
				<view class="value">
					<u-input placeholder="请输入执照编号" v-model="formdata.license" @blur="$validate('license')"/>
					<view class="tag-danger" v-if="rules.license.error">{{rules.license.error}}</view>
				</view>
			</view>
			<view :class="rules.contact.error?'item error':'item'">
				<view class="title">联系人：</view>
				<view class="value">
					<u-input placeholder="请输入联系人" v-model="formdata.contact"
						@blur="$validate('contact')" />
					<view class="tag-danger" v-if="rules.contact.error">{{rules.contact.error}}</view>
				</view>
			</view>
			<view :class="rules.mobile.error?'item error':'item'">
				<view class="title">联系手机：</view>
				<view class="value">
					<u-input placeholder="请输入联系手机" v-model="formdata.mobile"
						@blur="$validate('mobile')" />
					<view class="tag-danger" v-if="rules.mobile.error">{{rules.mobile.error}}</view>
				</view>
			</view>
			<view class="item" v-if="!formdata.id">
				<view class="title">验证码：</view>
				<view class="value">
					<u-input placeholder="请输入手机验证码" v-model="code">
						<template slot="suffix">
							<u-button
								@tap="getCode"
								:text="time==30?tips:time+'S'"
								type="primary"
								:disabled="time==30?false:true"
								size="small"
							></u-button>
						</template>
					</u-input>
				</view>
			</view>
			<view class="item">
				<view class="title">所属区域：</view>
				<view class="value picker">
					<Area :region="formdata.region" @changeRegion="changeRegion"></Area>
				</view>
			</view>
			<view class="item">
				<view class="title">收货位置：</view>
				<view class="value picker" @click="local">
					<text v-if="dw_address" style="max-width: 390rpx;overflow: hidden;white-space: nowrap;">{{dw_address}}</text>
					<text v-else>未定位</text>
					<u-icon name="arrow-right"></u-icon>
					<view class="tag-danger" v-if="dingweierror">请定位收货位置！</view>
				</view>
			</view>
			<view :class="rules.address.error?'item error':'item'">
				<view class="title">
					<text>详细地址：</text>
				</view>
				<view class="value">
					<u--textarea confirmType="done" placeholder="请输入详细地址" @blur="$validate('address')" v-model="formdata.address"></u--textarea>
					<view class="tag-danger" v-if="rules.address.error">{{rules.address.error}}</view>
				</view>
			</view>
			<view class="submit">
				<u-button v-if="formdata.id" type="primary" text="修改请联系管理员" :disabled="true"></u-button>
				<block v-else>
					<u-button v-if="register_id" type="primary" text="修改" @click="submit" :disabled="disabledsubmit"></u-button>
					<u-button v-else type="primary" text="提交" @click="submit" :disabled="disabledsubmit"></u-button>
				</block>
			</view>
		</view>
		<view class="formbox" v-if="formdata.customer_type=='family'">
			<view class="item">
				<view class="title">贸易商：</view>
				<view class="value">
					<u-input v-model="channel.title" disabled/>
				</view>
			</view>
			<view class="item" v-if="seller">
				<view class="title">推荐人：</view>
				<view class="value">
					<u-input v-model="seller.realname" disabled/>
				</view>
			</view>
			<view class="item">
				<view class="title">所属区域：</view>
				<view class="value picker">
					<Area v-if="formdata.region" :region="formdata.region" @changeRegion="changeRegion"></Area>
				</view>
			</view>
			<view :class="rules.address.error?'item error':'item'">
				<view class="title">
					<text>详细住址：</text>
				</view>
				<view class="value">
					<u--textarea confirmType="done" placeholder="请输入小区,楼号" @blur="$validate('address')" v-model="formdata.address"></u--textarea>
					<view class="tag-danger" v-if="rules.address.error">{{rules.address.error}}</view>
				</view>
			</view>
			<view class="item">
				<view class="title">收货位置：</view>
				<view class="value picker" @click="local">
					<text v-if="dw_address" style="max-width: 390rpx;overflow: hidden;white-space: nowrap;">{{dw_address}}</text>
					<text v-else>未定位</text>
					<u-icon name="arrow-right"></u-icon>
					<view class="tag-danger" v-if="dingweierror">请定位收货位置！</view>
				</view>
			</view>
			<view :class="rules.contact.error?'item error':'item'">
				<view class="title">联系人：</view>
				<view class="value">
					<u-input placeholder="请输入联系人" v-model="formdata.contact"
						@blur="$validate('contact')" />
					<view class="tag-danger" v-if="rules.contact.error">{{rules.contact.error}}</view>
				</view>
			</view>
			<view :class="rules.mobile.error?'item error':'item'">
				<view class="title">联系手机：</view>
				<view class="value">
					<u-input placeholder="请输入联系手机" v-model="formdata.mobile"
						@blur="$validate('mobile')" />
					<view class="tag-danger" v-if="rules.mobile.error">{{rules.mobile.error}}</view>
				</view>
			</view>
			<view class="item" v-if="!formdata.id">
				<view class="title">验证码：</view>
				<view class="value">
					<u-input placeholder="请输入手机验证码" v-model="code">
						<template slot="suffix">
							<u-button
								@tap="getCode"
								:text="time==30?tips:time+'S'"
								type="primary"
								:disabled="time==30?false:true"
								size="small"
							></u-button>
						</template>
					</u-input>
				</view>
			</view>
			<view class="submit">
				<u-button v-if="formdata.id" type="primary" text="修改请联系管理员" :disabled="true"></u-button>
				<block v-else>
					<u-button v-if="register_id" type="primary" text="修改" @click="submit" :disabled="disabledsubmit"></u-button>
					<u-button v-else type="primary" text="提交" @click="submit" :disabled="disabledsubmit"></u-button>
				</block>
			</view>
		</view>
	</view>
</template>

<script>
	import {methods}  from '@/utils/methods.js';
	import * as Area from '@/pages/components/area.vue';
	export default {
		components:{
			Area
		},
		data() {
			return {
				disabledsubmit:false,
				//注册企业
				sizeType: ['compressed'],
				rules: {					
					name: {
						title: '企业名称',
						rule: 'require',
						error: ''
					},
					cover_url: {
						title: '企业门头',
						rule: 'require',
						error: ''
					},
					license_photo: {
						title: '营业执照',
						rule: 'require',
						error: ''
					},
					license: {
						title: '执照编号',
						rule: 'require',
						error: ''
					},
					contact: {
						title: '联系人',
						rule: 'require;chinaChar;length(2~5)',
						error: ''
					},
					mobile: {
						title: '联系手机',
						rule: 'require;mobile',
						error: ''
					},
					address:{
						title: '详细地址',
						rule: 'require',
						error: ''
					}
				},
				formdata: {
					id:'',
					name: '',
					customer_type:'占位符',
					cover_url:[],
					license: '',
					license_photo: [],
					region: '',
					contact: '',
					mobile: '',
					latitude:'',
					longitude:'',
					address: ''
				},
				code:'',
				register_id:'',
				tips: '获取验证码',
				time:30,
				channel:'',
				seller: '',
				dw_address:false,
				dingweierror:false
			}
		},
		onLoad(e) {
			if (e.customer_id) {
				this.$get('user/getcustomer', {
					id: e.customer_id
				}).then(res => {
					this.formdata={
						id:res.id,
						name: res.name,
						cover_url:[{url:res.cover_url}],
						customer_type:res.customer_type,
						license: res.license,
						license_photo: [{url:res.license_photo}],
						region: [res.province_id,res.city_id,res.area_id],
						contact: res.contact,
						mobile: res.mobile,
						address: res.address,
						latitude:res.latitude,
						longitude:res.longitude
					};
					if(res.latitude && res.longitude){
						this.dw_address=res.address;
					}else{
						this.dw_address=false;
					}
					this.seller = res.seller;
					this.channel = res.channel;
				});
			}else if(e.register_id){
				this.$get('user/getregister', {
					id: e.register_id
				},true).then(res => {
					this.register_id=res.id;
					this.formdata = res.info;
					if(res.info.latitude && res.info.longitude){
						this.dw_address=res.info.address;
					}else{
						this.dw_address=false;
					}
					this.seller = res.seller;
					this.channel = res.channel;
				});
			}else if(e.qrcode_id){
				this.$get('user/getChannel', {
					qrcode_id: e.qrcode_id
				},true).then(res => {
					this.seller = res.seller;
					this.channel = res.channel;
				});
			}else{
				this.formdata.customer_type='';
				this.formdata.region=[2572,2573,2579];
				this.$get('user/getChannel','',true).then(res => {				
					this.seller = res.seller;
					this.channel = res.channel;
				});
			}
		},
		methods: {
			...methods,
			changeRegion:function(e){
				this.formdata.region=e;
			},
			local: function() {
				uni.chooseLocation({
					latitude:'26.6015',
					longitude:'106.62254',
					success: (e) => {
						this.dw_address = e.address;
						this.formdata.latitude = e.latitude;
						this.formdata.longitude = e.longitude;
						if(this.formdata.customer_type=='company'){
							this.formdata.address = e.address;
						}
						this.dingweierror = false;
					},
					fail: (e) => {
						console.log(e.errMsg);
					}
				});
			},
			deletePic: function() {
				this.formdata.license_photo = [];
				this.rules.license_photo.error=true;
			},
			afterRead: function(e) {
				let file = e.file;
				this.$uploadFile(file.url, res => {
					this.formdata.license_photo = [{
						url: res.fullurl
					}];
					this.rules.license_photo.error='';
					this.getCardId(res.fullurl);
				});
			},
			deletePic1:function(){
				this.formdata.cover_url=[];
				this.rules.cover_url.error=true;
			},
			afterRead1:function(e){
				let file=e.file;	
				this.$uploadFile(file.url,res=>{
					this.formdata.cover_url=[{url:res.fullurl}];
					this.rules.cover_url.error='';
				});
			},
			getCardId: async function(url) {
				this.$post('common/cardinfo', {
					url: url
				}, true).then(res => {
					if (res) {
						this.formdata.license = res.code;
						this.formdata.address = res.address;
					} else {
						this.$msg('没有识别出营业执照编号，请手动输入');
					}
				});
			},
			getCode:function(){
				if(this.time==30){
					this.$post('common/sendmsg',{template:'yanzhengma',mobile:this.formdata.mobile},true);
				}
				this.time--;
				if(this.time>0){
					setTimeout(res=>{
						this.getCode();
					},1000)	
				}else{
					this.time=30;
				}
			},
			submit: function() {
				if(this.disabledsubmit){
					return;
				}
				let rules={
					company:['name','cover_url','license_photo','license','contact','mobile','address'],
					family:['contact','mobile','address'],
				};
				let va=false;
				for (let k in rules[this.formdata.customer_type]) {
					if (!this.$validate(rules[this.formdata.customer_type][k])) {
						va=true;
					}
				}
				if (!this.formdata.latitude || !this.formdata.longitude) {
					this.dingweierror = true;
					va=true;
				}
				if(va){
					return;
				}
				this.disabledsubmit=true;
				this.$post('user/register', {
					channel_id:this.channel.id,
					seller_id: this.seller?this.seller.id:'',
					id:this.register_id,
					code:this.code,
					info: this.formdata
				}, true).then(res => {			
					setTimeout(res => {
						this.$reLaunch('index/index');
					}, 1500);
				}).catch(t=>{
					this.disabledsubmit=false;
				});
			},
		}
	}
</script>

<style lang="scss">
	@import "../common/form.scss";
	.u-page {
		padding-bottom: 100rpx;
	}
	.check-type{
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		height: 480rpx;
		padding: 20rpx;
		.title{
			text-align: center;
			font-size: 38rpx;
			height: 80rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.company{
			text-align: center;
			font-size: 32rpx;
			color: #fff;
			background: darkkhaki;
			height: 190rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.family{
			text-align: center;
			font-size: 32rpx;
			color: #fff;
			background: forestgreen;
			height: 190rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
</style>
